<template>
    <div>
        <div>
            <button @click="back()" class="button">
                <div class="button-box">
                    <span class="button-elem">
                        <svg viewBox="0 0 46 40" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z">
                            </path>
                        </svg>
                    </span>
                    <span class="button-elem">
                        <svg viewBox="0 0 46 40">
                            <path
                                d="M46 20.038c0-.7-.3-1.5-.8-2.1l-16-17c-1.1-1-3.2-1.4-4.4-.3-1.2 1.1-1.2 3.3 0 4.4l11.3 11.9H3c-1.7 0-3 1.3-3 3s1.3 3 3 3h33.1l-11.3 11.9c-1 1-1.2 3.3 0 4.4 1.2 1.1 3.3.8 4.4-.3l16-17c.5-.5.8-1.1.8-1.9z">
                            </path>
                        </svg>
                    </span>
                </div>
            </button>
        </div>
        <!-- 加载状态 -->
        <div v-if="loading" class="loading">加载中...</div>
        <!-- 文章卡片 -->
        <div v-else class="article-card">
            <div v-for="article in articleList" :key="article.id" class="card"
                :style="{ backgroundImage: `url(${config.downloadUrl}?name=${article.pic || defaultImage})` }">
                <div class="card__content" @click="toditials(article.id)">
                    <p class="card__title">{{ article.title }}</p>
                    <!-- 显示作者名称 -->
                    <p class="card__description">文章作者: {{ article.authorName || '加载中...' }}</p>
                    <p class="card__description">文章浏览量: {{ article.viewCount }}</p>
                </div>
            </div>
        </div>
    </div>
    <ditials v-if="foryouStore.isdrawerOpen" />
</template>

<script setup name="ForYou">
import { selectAllArticle } from '../../../api/article';
import { reactive, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import config from '../../../../public/config';
import { getuserMessage } from '../../../api/user';
import { useForYouStore } from '../../../stores/foryou';
import ditials from './ditials.vue';
import router from '../../../router';


const foryouStore = new useForYouStore()

const articleList = reactive([]); // 文章列表
const loading = ref(true); // 加载状态
const defaultImage = '1c7774d3-d275-411f-aa4d-30e900f5826a.png'; // 默认图片

onMounted(() => {
    getArticle();
});

// 获取浏览量前10的文章
async function getArticle() {
    try {
        const res = await selectAllArticle();
        console.log(res);
        if (res.code === 200) {
            articleList.splice(0, articleList.length, ...res.data.list);
            // 获取每篇文章的作者名称
            await fetchAuthorNames();
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '获取数据失败: ' + error.message,
        });
    } finally {
        loading.value = false; // 结束加载
    }
}

// 获取所有文章的作者名称并发请求
const fetchAuthorNames = async () => {
    try {
        const authorPromises = articleList.map((article) => fetchAuthorName(article));
        // 使用 Promise.all 来并发请求每篇文章的作者名称
        await Promise.all(authorPromises);
    } catch (error) {
        console.error('获取作者名称失败:', error);
    }
};

// 获取单篇文章的作者名称
const fetchAuthorName = async (article) => {
    try {
        const params = new URLSearchParams();
        params.append("id", article.userId);
        const response = await getuserMessage(params);
        // 将作者名称添加到 article 对象中
        article.authorName = response.data.username;  // 假设返回的是 { username: '作者名' }
    } catch (error) {
        console.error('获取作者名称失败:', error);
        article.authorName = '未知作者'; // 如果获取失败，显示为未知作者
    }
}
function toditials(id) {
    foryouStore.isdrawerOpen = true
    foryouStore.articleId = id
}
function back(){
    router.back()
}
</script>

<style scoped>
.title-span {
    font-size: 20px;
    font-weight: 550;
    cursor: pointer;
}

.loading {
    text-align: center;
    font-size: 18px;
    color: #666;
    margin-top: 20px;
}

.article-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* 卡片间距 */
    padding: 0 10px;
    /* 左右内边距 */
    margin-top: 20px;
}

.card {
    position: relative;
    width: calc(20% - 20px);
    /* 每行 5 个卡片，减去间距 */
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.card:hover {
    transform: rotate(-5deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    /* 半透明背景 */
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover .card__content {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}

.card__title {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-weight: 700;
}

.card__description {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    .card {
        width: calc(25% - 20px);
        /* 每行 4 个卡片 */
    }
}

@media (max-width: 992px) {
    .card {
        width: calc(33.33% - 20px);
        /* 每行 3 个卡片 */
    }
}

@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px);
        /* 每行 2 个卡片 */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%;
        /* 每行 1 个卡片 */
    }
}
.button {
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  outline: none;
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

.button:before,
.button:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 7px;
}

.button:before {
  border: 4px solid #0d2ad2;
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button:after {
  border: 4px solid #040013;
  transform: scale(1.3);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}

.button:hover:before,
.button:focus:before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:hover:after,
.button:focus:after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1) 80ms,
    transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) 80ms;
}

.button-box {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.button-elem {
  display: block;
  width: 20px;
  height: 20px;
  margin: 17px 18px 0 18px;
  transform: rotate(180deg);
  fill: #190a65;
}

.button:hover .button-box,
.button:focus .button-box {
  transition: 0.4s;
  transform: translateX(-56px);
}
</style>